<template>
  <div>
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item v-if="isEdit" label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item label="昵称" prop="realName">
        <el-input v-model="ruleForm.realName"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-if="!isEdit" type="primary" @click="handleSubmit()"
          >新增</el-button
        >
        <el-button v-if="isEdit" type="primary" @click="handleSubmit()"
          >保存修改</el-button
        >
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { addUser, updateUser } from "../../../../api/sys/user";
export default {
  name: "AdminDrawer",
  props: {
    record: {
      type: Object,
      default: function () {
        return {};
      },
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ruleForm: {
        id: "",
        username: "",
        password: "",
        realName: "",
        phone: "",
        email: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        realName: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
        ],
        password: [
          { required: !this.isEdit, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        phone: [
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "手机号码格式有误",
            trigger: "blur",
          },
        ],
        email: [
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    record: {
      handler(val) {
        if (val && Object.keys(val).length > 0) {
          this.initForm(val);
        } else {
          this.resetForm();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    //初始化表单
    initForm(val) {
      this.ruleForm = {
        id: val.id,
        username: val.username,
        realName: val.realName,
        password: val.password,
        phone: val.phone,
        email: val.email,
        // status: val.status,
      };
    },
    //提交表单
    async handleSubmit() {
      try {
        // 表单验证
        await this.$refs.ruleForm.validate();

        this.loading = true;

        // 准备提交数据
        const submitData = { ...this.ruleForm };

        let res = {};
        // 提交请求
        if (this.isEdit) {
          res = await updateUser(submitData);
        } else {
          res = await addUser(submitData);
        }

        if (res.code === 200) {
          this.$message.success(this.isEdit ? "编辑成功" : "新增成功");
          this.$emit("success");
          this.$emit("close");
        } else {
          this.$message.error(
            res.message || (this.isEdit ? "编辑失败" : "新增失败")
          );
        }
      } catch (error) {
        console.error("提交表单失败", error);
      } finally {
        this.loading = false;
      }
    },
    resetForm() {
      this.ruleForm = {
        id: "",
        username: "",
        realName: "",
        password: "",
        phone: "",
        email: "",
        // status: 1,
      };
    },
  },
};
</script>